<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文章</title>
    <!--公共css与js文件-->
    <th:block th:include="front/common/common_resource::resources"/>
    <script th:src="@{/js/front/other_says_detail.js}"></script>
</head>
<body>
<th:block th:include="front/common/header::nav"/>

<div class="grid_2">
    <div class="container">
        <!--轮播图片-->
        <div id="myCarousel" class="carousel slide">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img th:src="@{/images/o3.jpg}" src="../../static/images/o3.jpg" width="100%" alt="...">
                    </div>
                    <div class="item">
                        <img th:src="@{/images/o1.jpg}" src="../../static/images/o1.jpg" width="100%"  alt="...">
                    </div>
                    <div class="item">
                        <img th:src="@{/images/o2.jpg}" src="../../static/images/o2.jpg" width="100%"  alt="...">
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一篇</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一篇</span>
                </a>
            </div>
        </div>

        <!--左边帖子部分-->
        <div class="col-md-9 members_box2" style="margin-top: 10px">
            <div class="col_4">
                <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                    <!-- 解析的文章页面-->
                    <div id="myTabContent" class="tab-content">
                        </p>
                        <h2 th:text="${essayObj.title}"></h2></p>
                        <div th:utext="${essay}" style="background-color: white;padding: 30px;margin-bottom: 30px">

                        </div>
                        <h2 class="col-md-9">关于作者</h2>
                        <div id="like-essay" th:style="${like?'cursor: pointer':'cursor: pointer;color:red'}" th:value="${essayObj.id}"  th:text="${'('+essayObj.likeCount+')'}" class='fa fa-lg glyphicon-thumbs-up fa-thumbs-o-up col-md-3'></div>
                        <p/>
                        <p>Edit By <a href="#" th:text="${essayObj.writer.pseudonym}">MaHua</a></p>
                    </div>
                </div>
            </div>
        </div>

        <!--右边广告部分-->
        <div class="col-md-3 col_5" style="margin-top: 10px">

            <ul id="hot-essay-detail" class="match_box">
                <li><h4>推荐好文</h4></li><hr/>
                <li>
                    <div  style="cursor:pointer;" class="jobs-item with-thumb">
                        <div class="thumb_top">
                            <a class="thumb">
                                <img th:src="@{/images/p13.jpg}" src="../../static/images/p13.jpg" style="width: 100px" class="img-responsive" alt=""/></a>
                            </a>
                            <div class="jobs_right">
                               <a> <h5>老实人就适合当男朋友？</h5></a>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </div><hr/>
                </li>
                <li>
                    <div onclick="window.open('otherSaysDetail.html')" style="cursor:pointer;" class="jobs-item with-thumb">
                        <div class="thumb_top">
                            <div class="thumb">
                                <img th:src="@{/images/p13.jpg}" src="../../static/images/p13.jpg" style="width: 100px" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="jobs_right">
                                <h5>【焦点话题】无性婚姻你能接受吗？</a></h5>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </div><hr/>
                </li>
                <li>
                    <div onclick="window.open('otherSaysDetail.html')" style="cursor:pointer;" class="jobs-item with-thumb">
                        <div class="thumb_top">
                            <div class="thumb">
                                <img th:src="@{/images/p13.jpg}" src="../../static/images/p13.jpg" style="width: 100px" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="jobs_right">
                                <h5>男人为什么更偏爱狐狸精样的女人？</a></h5>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </div><hr/>
                </li>
                <li>
                    <div onclick="window.open('otherSaysDetail.html')" style="cursor:pointer;" class="jobs-item with-thumb">
                        <div class="thumb_top">
                            <div class="thumb">
                                <img th:src="@{/images/p13.jpg}" src="../../static/images/p13.jpg" style="width: 100px" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="jobs_right">
                                <h5>【情感心语】如何知道一个姑娘...</a></h5>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </div><hr/>
                </li>
            </ul>
           <!-- <img th:src="@{/images/v1.jpg}" src="../../static/images/v1.jpg" class="img-responsive" alt=""/>-->
        </div>
    </div>
</div>

<!--页面尾部-->
<th:block th:include="front/common/footer::foot"/>

</body>
</html>